<template>
    <div id="swipercom">
        <div class="swiper-container" id="swiperIndex">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, i) in imgs" :key="i">
                    <img :src="item.pic" alt="">
                </div>
            </div>
            <!-- //换页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>

<script>
import 'swiper/css/swiper.css'  //引入swiper样式
import Swiper from 'swiper';	//引入swiper
import axios from 'axios';
import {getBanner} from '@/api/index'
export default {
    name: "swiperCom",
    data() {
        return {
            imgs: []
        }
    },
    async mounted() {
        let result= await getBanner(1)
        this.imgs = result.data.banners
    },
    updated(){
        var mySwiper = new Swiper('#swiperIndex', {
            //配置分页器内容
            autoplay: true,
            speed: 2000,
            loop: true, // 循环模式选项
            pagination: {
                el: ".swiper-pagination",//换页器与哪个标签关联
                clickable: true//分页器是否可以点击
            },
            //如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        })
    }
    // methods:{

    // }

}
</script>

<style lang="less" scoped>
#swipercom {
    width: 7.5rem;
    position: relative;
    z-index: 0;
    .swiper-container {
        width: 7.1rem;
        height: 2.6rem;
        border-radius: 0.1rem;

        .swiper-slide {
            width: 100% !important;
            height: 100%;
            img{
                width: 100%;
                height: 100%;
            }
        }

        .swiper-pagination-bullet-active {
            background-color: orangered;
        }

    }
}
</style>
